{% extends "article/base.html" %}
{% block title %}redit article{% endblock %}
{% load static %}
{% block content %}
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
    <div class="container">
        <div class="col-md-10">
            <div style="margin-left: 10px">
                <form class="form-horizontal" action="." method="post">
                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-2 text-right"><span>标题：</span></div>
                        <div class="col-md-10 text-left">{{ this_article_form.title }}</div>
                    </div>

                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-2 text-right"><span>栏目：</span></div>
                        <div class="col-md-10 text-left">
                            <label for="which_column"></label>
                            <select id="which_column">
                                {% for article_column in article_columns %}
                                    {% if article_column == this_article_column.column %}
                                        <option value="{{ article_column.id }}" selected="selected">
                                            {{ article_column.column }}
                                        </option>
                                    {% else %}
                                        <option value="{{ article_column.id }}">{{ article_column.column }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-2 text-right"><span>文章标签：</span></div>
                        <div class="col-md-10 text-left">
                            {% for article_tag in article_tags %}
                                <label class="checkbox-inline">
                                    <input class="tagcheckbox" type="checkbox" id="{{ article_tag.id }}" name="article_tag"
                                           value="{{ article_tag.tag }}">{{ article_tag.tag }}
                                </label>
                            {% empty %}
                                <p>You have not type tags for articles. Please
                                <a href="{% url 'article:article_tag' %}">add your tags</a>.
                                </p>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-2 text-right"><span>内容：</span></div>
                        <div class="col-md-10 text-left" id="editormd">
                            <label for="id_body"></label>
                            <textarea style="display: none" id="id_body">{{ article.body }}</textarea>
                        </div>
                        {#                        <div id="editormd" class="col-md-10 text-left">#}
                        {#                            <textarea style="display:none;" id="id_body"></textarea>#}
                        {#                        </div>#}
                    </div>

                    <div class="row">
                        <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="redit_article()">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            const editor = editormd("editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{% static 'editor/lib/.' %}",
            });
        });
    </script>
    <script type="text/javascript">
        function redit_article() {
            const title = $("#id_title").val();
            const column_id = $("#which_column").val();
            const body = $("#id_body").val();
            const article_tags = [];
            $.each($("input[name='article_tag']:checked"), function () {
               article_tags.push($(this).val());
            });
            $.ajax({
                url: "{% url 'article:redit_article' article.id %}",
                type: "POST",
                data: {
                    "article_id": {{ article.id }},
                    "title": title,
                    "column_id": column_id,
                    "body": body,
                    "tags": JSON.stringify(article_tags)
                },
                success: function (e) {
                    if (e === "1") {
                        layer.msg("successful");
                        location.href = "{% url 'article:article_list' %}";
                    } else {
                        layer.msg("sorry.");
                    }
                },
            });
        }
    </script>
{% endblock %}